<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="css/index.css">
		<title>vivo</title>
	</head>
	<body>
		<!-- 顶部黑色功能区 -->
		<div class="top">
			<div class="center">
				<div class="top-att">
					<div>
						<a href="#">品牌</a>
						<a href="#">OriginOS</a>
						<a href="#">体验店</a>
						<a href="#">社区</a>
					</div>
					<div>
						<a href="#">下载app</a>
						<a href="#">购物车</a>
						<a href="#">个人中心</a>
					</div>
				</div>
			</div>
		</div>
		<!-- 切换导航栏 -->
		<div class="nav">
			<div class="center">
				<div class="nav-att">
					<img class="nav-att-img1" src="images/logo.png" alt="">
					<div>
						<ul>
							<li>
								<span>X系列</span>
								<div class="ul-box">
									<div class="li-little">
										<img src="images/X/X90pro+1.png" class="li-tu1 li-tu-wh">
										<img src="images/X/X90pro+2.png" class="li-tu2 li-tu-wh">
										<img src="images/X/X90pro+3.png" class="li-tu3 li-tu-wh">
										<div class="li-bottom">
											<span>X90 Pro+</span>
											<button type="submit"><span>new</span></button>
										</div>
									</div>
									<div class="li-little">
										<img src="images/X/X90pro1.png" class="li-tu1 li-tu-wh">
										<img src="images/X/X90pro2.png" class="li-tu2 li-tu-wh">
										<img src="images/X/X90pro3.png" class="li-tu3 li-tu-wh">
										<div class="li-bottom">
											<span>X90 Pro</span>
											<button type="submit"><span>new</span></button>
										</div>
									</div>
									<div class="li-little">
										<img src="images/X/X901.png" class="li-tu1-5 li-tu-wh">
										<img src="images/X/X902.png" class="li-tu2-5 li-tu-wh">
										<img src="images/X/X903.png" class="li-tu3-5 li-tu-wh">
										<img src="images/X/X904.png" class="li-tu4-5 li-tu-wh">
										<img src="images/X/X905.png" class="li-tu5-5 li-tu-wh">
										<div class="li-bottom">
											<span>X90</span>
											<button type="submit"><span>new</span></button>
										</div>
									</div>
									<div class="li-little">
										<img src="images/X/XFold.png" class="li-tu-wh-2 ">
										<div class="li-bottom">
											<span>X Fold+</span>
											<button type="submit"><span>new</span></button>
										</div>
									</div>
									<!-- X80pro -->
									<div class="li-little">
										<img src="images/X/x80pro.png" class="li-tu-wh li-tu1-4">
										<img src="images/X/x80pro1.png" class="li-tu-wh li-tu2-4">
										<img src="images/X/x80pro2.png" class="li-tu-wh li-tu3-4">
										<img src="images/X/x80pro3.png" class="li-tu-wh li-tu4-4">
										<div class="li-bottom">
											<span>X80Pro</span>
											<button type="submit"><span>new</span></button>
										</div>
									</div>
									<!-- X80 -->
									<div class="li-little">
										<img src="images/X/x80.png" class="li-tu-wh li-tu1-4">
										<img src="images/X/x801.png" class="li-tu-wh li-tu2-4">
										<img src="images/X/x802.png" class="li-tu-wh li-tu3-4">
										<img src="images/X/x803.png" class="li-tu-wh li-tu4-4">
										<div class="li-bottom">
											<span>X 80</span>
											<button type="submit"><span>new</span></button>
										</div>
									</div>
									<!-- X flod -->
									<!-- <div class="li-little">
										<img src="images/X/xfloa.png" class="li-tu-wh-2 ">
										<div class="li-bottom">
											<span>X Fold</span>
											<button type="submit"><span>new</span></button>
										</div>
									</div> -->
								</div>
							</li>
							<li><span>S系列</span></li>
							<li><span>Y系列</span></li>
							<li><span>iQOO手机</span></li>
							<li><span>智能硬件</span></li>
							<li><span>商城</span></li>
							<li><span>服务</span></li>
						</ul>
					</div>
					<img src="images/search.png" alt="">
				</div>
			</div>
		</div>
		<!-- 第一主区域 -->
		<div class="cen-1">
			<a href="#">
				<img class="bg-1" src="./images/bg1.jpg" alt="">
				<div class="bg1-logo-box"><img class="bg1-logo" src="./images/bg1-logo.png" alt=""></div>

				<div class="cen1-more">
					<a href="#"><b>了解更多</b></a>
					<a href="#"><button><b class="b1">></b><b class="b2">·</b></button></a>
				</div>
			</a>
		</div>
	</body>
</html>
